<template>
  <a-modal
    v-model:open="visible"
    title="编辑活动"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <a-form
      :model="formState"
      :rules="rules"
      ref="formRef"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item label="活动名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入活动名称" />
      </a-form-item>

      <a-form-item label="抽奖积分" name="price">
        <a-input-number
          v-model:value="formState.price"
          :min="0"
          placeholder="请输入抽奖积分"
          style="width: 100%"
        />
      </a-form-item>

      <a-form-item label="活动封面" name="cover">
        <upload-component v-model:value="formState.cover" @change="changeCover" />
      </a-form-item>

      <a-form-item label="活动标签" name="tag">
        <a-select
          v-model:value="formState.tag"
          mode="multiple"
          placeholder="请选择活动标签"
          style="width: 100%"
        >
          <a-select-option v-for="(item, index) in tagOptions" :key="index" :value="String(index)">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="进度" name="progress">
        <a-select
          v-model:value="formState.progress"
          class="inputW"
          :options="progressOption"
          placeholder="全部"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="活动状态" name="status">
        <a-switch v-model:checked="formState.status" :checkedValue="'1'" :unCheckedValue="'0'" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import uploadComponent from '@/components/uploadComponent.vue'

interface FormState {
  _id?: string
  name: string
  price: number
  progress: string
  cover: string
  tag: string[]
  status: string
}

const visible = ref(false)
const confirmLoading = ref(false)
const formRef = ref<FormInstance>()

const tagOptions = [ '新人专区', '男生专属', '女生专属', '数码', '美妆', '情侣专属']
const progressOption = [
  {
    label: '预发布',
    value: '0',
  },
  {
    label: '进行中',
    value: '1',
  },
  {
    label: '已完成',
    value: '2',
  },
]
const formState = reactive<FormState>({
  name: '',
  price: 0,
  cover: '',
  tag: [],
  status: '0',
  progress: '0',
})

const rules = {
  name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
  price: [{ required: true, message: '请输入抽奖积分', trigger: 'change' }],
  cover: [{ required: true, message: '请上传活动封面', trigger: 'change' }],
  tag: [{ required: true, message: '请选择活动标签', trigger: 'change' }],
}

const emit = defineEmits(['update', 'cancel'])
const changeCover = (url: string) => {
  formState.cover = url
}
const handleOk = async () => {
  try {
    await formRef.value?.validate()
    confirmLoading.value = true
    emit('update', formState)
    visible.value = false
    confirmLoading.value = false
  } catch (error) {
    console.error('验证失败:', error)
  }
}

const handleCancel = () => {
  visible.value = false
  emit('cancel')
}

const open = (record?: FormState) => {
  if (record) {
    Object.assign(formState, record)
  } else {
    Object.assign(formState, {
      _id: '',
      name: '',
      price: 0,
      cover: '',
      tag: [],
      status: '0',
      progress: '0',
    })
  }
  visible.value = true
}

defineExpose({
  open,
})
</script>
